<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>
<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %>
<%@ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic" %>
<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %>
<html:xhtml />
<script type="text/javaScript">
    function showGeneDiv() {
        HideAll();
        if ($("[name=group2]:checked").val() == "asthma")
        {
            showAsthma();
        }
        else if ($("[name=group2]:checked").val() == "atopy")
        {
            showAtopy();
        }
        else if ($("[name=group2]:checked").val() == "atopicAsthma")
        {
            showAtopicAsthma();
        }
        else if ($("[name=group2]:checked").val() == "ahr")
        {
            showAHR();
        }
    }

    function HideAll() {
        $("div[id*=Heatmap]").hide();
        $("div[id*=Pvalue]").hide();
    }

    function showAsthma() {
        if ($("#pathwayScore").length > 0 && $("#sidacPathwayScore").length > 0)
        {
            <bean:write name="keggPathwayForm" property="asthmaJS" filter="false"/>
        }

        if ($("[name=group1]:checked").val() == "pvalues")
        {
            $("[id^=asthmaPvalue]").show();
        }
        else if ($("[name=group1]:checked").val() == "heatmap")
        {
            $("[id^=asthmaHeatmap]").show();
        }
        else
        {
            hideAll();
        }
    }
    function showAtopy(){
        if ($("#pathwayScore").length > 0 && $("#sidacPathwayScore").length > 0)
        {
            <bean:write name="keggPathwayForm" property="atopyJS" filter="false"/>
        }
        if ($("[name=group1]:checked").val() == "pvalues")
        {
            $("[id^=atopyPvalue]").show();
        }
        else if ($("[name=group1]:checked").val() == "heatmap")
        {
            $("[id^=atopyHeatmap]").show();
        }
        else
        {
            hideAll();
        }
    }
    function showAtopicAsthma(){
        if ($("#pathwayScore").length > 0 && $("#sidacPathwayScore").length > 0)
        {
            <bean:write name="keggPathwayForm" property="atopicAsthmaJS" filter="false"/>
        }

        if ($("[name=group1]:checked").val() == "pvalues")
        {
            $("[id^=atoAsthPvalue]").show();
        }
        else if ($("[name=group1]:checked").val() == "heatmap")
        {
            $("[id^=atoAsthHeatmap]").show();
        }
        else
        {
            hideAll();
        }
    }
    function showAHR(){
        if ($("#pathwayScore").length > 0 && $("#sidacPathwayScore").length > 0)
        {
            <bean:write name="keggPathwayForm" property="ahrJS" filter="false"/>
        }

        if ($("[name=group1]:checked").val() == "pvalues")
        {
            $("[id^=ahrPvalue]").show();
        }
        else if ($("[name=group1]:checked").val() == "heatmap")
        {
            $("[id^=ahrHeatmap]").show();
        }
        else
        {
            hideAll();
        }
    }

    function showAssociation() {
        geneArray = $("div.leftMenu select").val();
        gene = geneArray[0];
        for (i = 1; i < geneArray.length; i++)
        {
            gene += "\n" + geneArray[i];
        }
        $("#pvalueModal").load("<html:rewrite page="/assocSearchSubmit.do" /> #ajaxContent",
                               {chkGene: 'on',
                                genes: gene,
                                submitType: 'Search',
                                noCache: Math.random()},
                                function(response, status, xhr) {
                                    if(status == "error")
                                    {
                                        $("#pvalueModal").html(xhr.status + " " + xhr.statusText);
                                    }
                                    $("#pvalueModal").dialog("option", "height", 'auto');
                                    $("#pvalueModal").dialog("open");
                                });
    }

    $(document).ready(function() {
        $("#helpDialog").dialog({
            autoOpen: false,
            position: "right"
        });
        $("#helpButton").click(function() {
            $("#helpDialog").dialog("open");
        });
        $("#pvalueModal").dialog({
           autoOpen: false,
           position: "top",
           modal: true,
           width: 775
        });
        
        $(":radio").click(function() {
            showGeneDiv();
        });
        showGeneDiv();
    });

    $(window).load(function() {
        var img = $("img#pathwayImg").first();
        width = $(img).width();
        height = $(img).height();
        $(img).css("width", "100%");
        var left;
        var top;
        $("div[id*=Heatmap]").each(function() {
            left = parseInt($(this).css("left")) / width * 100;
            top = parseInt($(this).css("top")) / height * 100;
            $(this).css("left", left + "%");
            $(this).css("top", top + "%");
        });
        $("div[id*=Pvalue]").each(function() {
            left = parseInt($(this).css("left")) / width * 100;
            top = parseInt($(this).css("top")) / height * 100;
            $(this).css("left", left + "%");
            $(this).css("top", top + "%");
        });
    });
</script>
<div id="keggPathway" class="content">
    <h2>
        Kegg Pathway <span id="helpButton" class="ui-icon help ui-icon-info">&nbsp;&nbsp;&nbsp;</span>
    </h2>
    <logic:present name="user_name">
        <div id="pathwayScore">Nyholt Pathway Score: </div>
        <div id="sidacPathwayScore">Sidac Pathway Score: </div>
    </logic:present>

    <div class="leftMenu">
        <p><bean:message key="pathway.gene" />:</p>
        <html:errors property="genes" />
        <html:form action="keggPathwaySubmit">
            <div>
                <html:select property="geneNames" size="8" multiple="multiple">
                    <html:optionsCollection name="keggPathwayForm" property="geneList" label="name" value="name" />
                </html:select>
                <html:hidden value="custom" property="source" />
                <html:submit value="SNP List" property="submitType" />
                <html:button value="Associations" property="submitType" onclick="showAssociation();" />
                <html:submit value="Gene Gene Interaction" property="submitType" />
                <logic:present name="user_name">
                    <html:submit value="SNP Ratio Test" property="submitType" />
                </logic:present>
            </div>
        </html:form>
    </div>
    <div class="rightChart">
        <div>
            <input id="genes" type="radio" name="group1" value="genes" />
            <label for="genes">Genes</label>
            <input id="pvalues" type="radio" name="group1" value="pvalues" checked="checked" />
            <label for="pvalues">Pvalues</label>
            <input id="heatmap" type="radio" name="group1" value="heatmap" />
            <label for="heatmap">Heatmap</label>
            <span><strong>|</strong></span>
            <input id="asthma" type="radio" name="group2" value="asthma" checked="checked" />
            <label for="asthma">Asthma</label>
            <input id="atopy" type="radio" name="group2" value="atopy" />
            <label for="atopy">Atopy</label>
            <input id="ahr" type="radio" name="group2" value="ahr" />
            <label for="ahr">AHR</label>
            <input id="atopicAsthma" type="radio" name="group2" value="atopicAsthma" />
            <label for="atopicAsthma">Atopic Asthma</label>
        </div>
        <div class="diagram">
            <a title="Click to see the larger image." href="<bean:write name="keggPathwayForm" property="URL" />" target="_blank">
                <img id="pathwayImg" src="<bean:write name="keggPathwayForm" property="URL" />" alt="Kegg Pathway" />
            </a>
            <bean:write name="keggPathwayForm" property="divHTML" filter="false"/>
        </div>
    </div>
</div>
<div id="helpDialog" title="Kegg Pathway">
    <tiles:insert name="keggPathwayHelp" />
</div>
<div id="pvalueModal" title="Association"></div>